<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { ref, onMounted } from "vue";

const ipAddress = ref("");
const macAddress = ref("");

onMounted(async () => {
  const networkInfo = await window.electronAPI.getNetworkInfo();
  ipAddress.value = networkInfo.ip;
  macAddress.value = networkInfo.mac;
});
</script>

<template>
  <div>
    <a href="https://www.electronjs.org/" target="_blank">
      <img
        src="./assets/electron.svg"
        class="logo electron"
        alt="Electron logo"
      />
    </a>
    <a href="https://vitejs.dev/" target="_blank">
      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Electron + Vite + Vue" />
  <div class="network-info">
    <div>IP Address: {{ ipAddress }}</div>
    <div>MAC Address: {{ macAddress }}</div>
  </div>
  <div class="flex-center">
    Place static files into the <code>/public</code> folder
    <img style="width: 2.4em; margin-left: 0.4em" src="/logo.svg" alt="Logo" />
  </div>
</template>

<style>
.network-info {
  margin-top: 2em;
  padding: 1em;
  border: 1px solid #646cff;
  border-radius: 8px;
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
}

.network-info div {
  margin: 0.5em 0;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo.electron:hover {
  filter: drop-shadow(0 0 2em #9feaf9);
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
